<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span>提现</span>
      <span class="link">提现记录</span>
    </div>
    <div class="choose">
      <van-cell
        v-if="!bankCard.num"
        title="单元格"
        is-link
        @click="chooseBankCard"
      >
        <span slot="title">请选择银行卡</span>
        <img slot="icon" class="icon" src="../../assets/images/yl.png" />
      </van-cell>
      <van-cell v-else title="单元格" is-link @click="chooseBankCard">
        <template slot="title">
          <p class="bank">{{ bankCard.title }}</p>
          <p class="info">尾号：{{ bankCard.num + bankCard.type }}</p>
        </template>
        <img
          slot="icon"
          class="icon"
          :src="require(`../../assets/images/bank_${bankCard.name}.png`)"
        />
      </van-cell>
    </div>
    <div class="money">
      <p class="tit">提现金额</p>
      <van-field v-model="money" autofocus />
      <p class="tip">可用余额：10000.00元，再刷50单可提现</p>
    </div>
    <div class="big-btn">预计两个小时到账，确认提现</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: null,
      bankCard: {}
    };
  },
  created() {
    this.getCard();
  },
  methods: {
    chooseBankCard() {
      this.$router.push({ name: "withdrawChoose" });
    },
    getCard() {
      this.bankCard = this.$route.params.card || {};
    }
  },
  watch: {
    $route: "getCard"
  }
};
</script>
